<template>
  <div class="nav">
    <div class="navBox">
      <div class="Logobox">
        <a href="/" class="img">
          <img
            src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/logo-cn.00c32c62.svg"
            alt="" class="logoimg" />
        </a>
      </div>
      <div class="libox">
        <div class="ulbox">
          <!-- <router-link to="/"> -->
          <span class="router" :class="routerPath == '/home' ? 'colorTxt' : ''"
            @click="toHome">首页</span>
          <!-- </router-link> -->
          <!-- <router-link to="explore"> -->
          <span class="router" :class="routerPath == '/explore' ? 'colorTxt' : ''"
            @click="toExplore">探索</span>
          <!-- </router-link> -->
          <!-- <router-link to="label"> -->
          <span class="router" :class="routerPath == '/label' ? 'colorTxt' : ''"
            @click="toLabel">标签</span>
          <!-- </router-link> -->
          <!-- <router-link to="photographer"> -->
          <span class="router" :class="routerPath == '/photographer' ? 'colorTxt' : ''"
            @click="toPhotographer">摄影师</span>
          <!-- </router-link> -->
          <!-- <router-link to="creators"> -->
          <span class="router" :class="routerPath == '/creators' ? 'colorTxt' : ''"
            @click="toCreators">签约摄影师招募</span>
          <!-- </router-link> -->
          <!-- <router-link to="skycity"> -->
          <div class="router" :class="routerPath == '/skycity' ? 'colorTxt' : ''"
            @click="toSkycity">
            <span>天空之城新品体验馆招募</span>
            <img
              src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/hot-tag.36b40497.svg"
              alt="" />
          </div>
          <!-- </router-link> -->
        </div>
      </div>
      <!-- 未登录成功前的显示 -->
      <div class="rightbox" v-if="!is_login">
        <input type="text" />
        <span class="router" :class="routerPath == '/' ? 'colorTxt' : ''" @click="toLogon">登录</span>
        <span class="router2" :class="routerPath == '/' ? 'colorTxt' : ''"
          @click="toRegister">注册</span>
      </div>
      <!-- 登录成功的显示 -->
      <div class="rightbox rightStyle" v-if="is_login">
        <div class="rightContentBox">
          <div class="imgBox">
            <el-avatar size="medium" :src="is_login.headpic"></el-avatar>
          </div>
          <div class="userNameBox">{{ is_login.username }}</div>
          <span class="router2 router" :class="routerPath == '/' ? 'colorTxt' : ''"
            @click="toPerson">个人中心</span>
          <span class="router2" :class="routerPath == '/' ? 'colorTxt' : ''"
            @click="signOut">退出</span>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      is_login: null,
      routerPath: null,
    };
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.routerPath = val.path;
      },
      deep: true,
    },
  },
  computed: {},
  mounted() {
    this.getUserInfo();
    this.routerPath = window.location.pathname; //默认
  },
  methods: {
    getUserInfo() {
      let is_login = localStorage.getItem("islogin");
      let params = {
        email: is_login,
      };
      this.$axios.post("/api/getUserInfo", params).then((res) => {
        let { data } = res;
        this.is_login = data[0];
        this.$store.commit("SET_USERINFO", this.is_login);
      });
    },
    toHome() {
      this.$router.push("/");
    },
    toExplore() {
      this.$router.push("/explore");
    },
    toLabel() {
      this.$router.push("/label");
    },
    toPhotographer() {
      this.$router.push("/photographer");
    },
    toCreators() {
      this.$router.push("/creators");
    },
    toSkycity() {
      this.$router.push("/skycity");
    },
    // 登录
    toLogon() {
      this.$router.push("/logon");
    },
    // 注册
    toRegister() {
      this.$router.push("/register");
    },
    //个人中心
    toPerson() {
      this.$router.push("/personPage")
    },
    signOut() {
      // this.$router.push("/home")
      location.reload();
      localStorage.removeItem("islogin")
      // console.log(9999);
    }
  },
  created() { },
};
</script>
<style  scoped lang='scss'>
.el-dropdown-link {
  cursor: pointer;
  // color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
Fa {
  color: #999;
  font-weight: 600;
  margin: 0.5rem;
  line-height: 1;
}
a:hover {
  color: #fff;
}
.navBox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: 4rem;
  background-color: #000;
  display: flex;
  justify-content: space-between;
}
.nav {
  height: 4rem;
}
/* .Logobox {
  justify-content: center;
  align-items: center;
} */
.logoimg {
  width: 200px;
  height: 20px;
  margin: 0 auto;
  padding-top: 20px;
}
.libox {
  height: 100%;
}
.ulbox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
/* 顶部导航栏右边部分 */
.rightbox {
  width: 280px;
  line-height: 60px;
  height: 60px;
  text-align: center;
}
.router {
  color: #999;
  padding: 0 13px;
}
.router2 {
  color: #999;
}
.router:hover {
  cursor: pointer;
  color: #fff;
}
.router2:hover {
  cursor: pointer;
  color: #fff;
}
.rightStyle {
  .rightContentBox {
    width: 320px;
    display: flex;
  }
  .imgBox {
    padding-top: 14px;
  }
  .userNameBox {
    color: #999;
    margin-left: 10px;
    line-height: 60px;
  }
}
.colorTxt {
  color: #fff;
}
.person {
  color: white;
}
</style>